'use client'
import React, { useEffect, useState } from 'react';
import { useRouter } from 'next/navigation';
import { Edit } from 'lucide-react';
import { isAuthenticated } from '@/services/authService';

interface EditButtonProps {
  className?: string;
}

const EditButton: React.FC<EditButtonProps> = ({ className = '' }) => {
  const router = useRouter();
  
  const [isAuth, setIsAuth] = useState(false);
  
  useEffect(() => {
    setIsAuth(isAuthenticated());
  }, []);

  const handleClick = () => {
    if (isAuth) {
      router.push('/new-article');
    } else {
      // 如果未登录，可以选择跳转登录页面或者显示提示
      // 这里暂时不做任何操作，因为用户要求只有登录后才显示并跳转
    }
  };
  
  // 只有登录后才渲染按钮
  if (!isAuth) {
    return null;
  }
  
  return (
    <button
      onClick={handleClick}
      className={`
        fixed
        left-4
        bottom-4
        w-14
        h-14
        rounded-full
        bg-primary
        text-white
        shadow-lg
        flex
        items-center
        justify-center
        transition-all
        hover:bg-primary/90
        hover:scale-110
        active:scale-95
        z-50
        ${className}
      `}
      aria-label="写文章"
      title="写文章"
    >
      <Edit size={24} />
    </button>
  );
};

export default EditButton;
